{% extends "admin/base_site_grid.html" %}
{% load i18n %}
{% block extrahead %}{{block.super}}
<script>
  var refresh = null;
  var lastcompleted = -1;
  
  function extraPreference() {
    return {
       "height": Math.round($("#gbox_grid").height() - 48),
       "refresh": (refresh !== null)
       };
  }

  function updateRefresh()
  {
    if (refresh !== null)
    {
       // Disable the refresh which is currently active
       clearInterval(refresh);
       $('#autorefresh span').removeClass("fa-pause").addClass("fa-refresh");
       refresh = null;
    }
    else
    {
      // Enable the refresh which is currently inactive
      refresh = setInterval(function() {
        $(".tooltip").tooltip('hide');
        $("#grid").trigger("reloadGrid",[{current:true}]);
        }, 5000);
      $('#autorefresh span').removeClass("fa-refresh").addClass("fa-pause");
    }
    grid.saveColumnConfiguration();
  }

  function status (cellvalue, options, rowdata) {
    if (cellvalue == 'Failed')
      return "<span class='bg-danger' style='display:block; margin:-5px; line-height:32px'>{% trans 'failed'|capfirst %}</span>";
    else if (cellvalue == 'Waiting')
      return "{% trans 'waiting'|capfirst|force_escape %}&nbsp;&nbsp;<button class='btn btn-primary btn-default' style='padding:0 0.5em 0 0.5em; font-size:66%' onclick='cancelTask(" + rowdata['id'] + ")'>{% filter force_escape %}{% trans 'Cancel' %}{% endfilter %}</button>";
    else if (cellvalue == 'Done')
      return "{% trans 'done'|capfirst %}";
    else if (cellvalue == 'Canceled')
      return "{% trans 'canceled'|capfirst %}";
    else if (rowdata.cancelable == "True")
      return cellvalue + "&nbsp;&nbsp;<button class='btn btn-primary btn-default' style='padding:0 0.5em 0 0.5em; font-size:66%' onclick='cancelTask(" + rowdata['id'] + ")'>{% filter force_escape %}{% trans 'Cancel' %}{% endfilter %}</button>";
    else
      return cellvalue;
  }

  function logbutton (cellvalue, options, rowdata) {
    if (typeof(cellvalue) !== 'undefined') {
      taskid = rowdata['id'];
      return '<a class="btn btn-primary" style="padding:0 0.5em 0 0.5em; font-size:66%" href="{{request.prefix}}/execute/logfrepple/'+taskid+'/">{% trans "view"|capfirst|force_escape %}</a>';
    } else {
      return "";
    }
  }

  function cancelTask(id) {
    $.jgrid.hideModal("#searchmodfbox_grid");
    $("#popup").html('<div class="modal-dialog">'+
        '<div class="modal-content">'+
          '<div class="modal-header" style="border-top-left-radius: inherit; border-top-right-radius: inherit">'+
            '<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true" class="fa fa-times"></span></button>'+
            '<h4 class="modal-title">'+gettext('Cancel task')+'</h4>'+
          '</div>'+
          '<div class="modal-body"><p>'+
          interpolate(gettext('You are about to cancel task %s'), [id]) +
          '</p></div>'+
          '<div class="modal-footer">'+
            '<input type="submit" id="confirmbutton" role="button" class="btn btn-danger pull-right" value="'+gettext('Cancel task')+'">'+
            '<input type="submit" id="cancelbutton" role="button" class="btn btn-primary pull-left" data-dismiss="modal" value="'+gettext('close')+'">'+
          '</div>'+
        '</div>'+
    '</div>' )
    .modal('show');
    $('#confirmbutton').on('click', function() {
        $.ajax({
          url: "{{request.prefix}}/execute/cancel/" + id + "/",
          type: "POST",
          success: function () {
            $('#popup').modal('hide');
          },
          error: function (result, stat, errorThrown) {
            $('#popup .modal-body p').html(result.responseText);
            $('#popup .modal-title').html(gettext("Error"));
            $('#confirmbutton').prop("disabled", true).hide();
            }
        })
      })
  }

  $(function() {

    {% if not "refresh" in preferences or preferences.refresh %}
    // Refresh the grid every 5 seconds
    refresh = setInterval(function() {
      $(".tooltip").tooltip('hide');
      $("#grid").trigger("reloadGrid",[{current:true}]);
      }, 5000);{% endif %}

    var resizeoptions={
        handleSelector: "#resize-handle",
        resizeWidth: false,
        resizeHeight: true,
        onDrag: function (e, $el, opt) {$("#grid").setGridHeight($('#content-main').height()-52);},
    }
    $("#resize-handle").css({'display':'inline-block'});
    $("#content-main").resizable({
      handleSelector: "#resize-handle",
      resizeWidth: false,
      resizeHeight: true,
      onDrag: function (e, $el, opt) {$("#grid").setGridHeight($('#content-main').height()-52);},
      onDragEnd: function (e, $el, opt) {grid.saveColumnConfiguration();}
    });

  });
  var models = {% getModelDependencies %};
</script>

<style>
#scenarios td {
  padding: 5px;
  white-space: nowrap;
  vertical-align: middle;
}
#grid tr td {
  line-height: 22px;
}
#grid_frozen tr td {
  line-height: 22px;
}
.chck_all, .chck_entity, .empty_all, .empty_entity {
  margin-left: 20px;
  margin-right: 20px;
}

.toast {
  visibility: hidden;
  position: absolute;
  z-index: 1;
  left: 50%;
}

.toast.show {
  visibility: visible;
  -webkit-animation: fadein 0.5s, fadeout 0.5s 2.5s;
  animation: fadein 0.5s, fadeout 0.5s 2.5s;
}

@-webkit-keyframes fadein {
  from {opacity: 0}
  to {opacity: 1}
}

@keyframes fadein {
  from {opacity: 0}
  to {opacity: 1}
}

@-webkit-keyframes fadeout {
  from {opacity: 1}
  to {opacity: 0}
}

@keyframes fadeout {
  from {opacity: 1;}
  to {opacity: 0;}
}

</style>
{% endblock %}

{% block extra_grid %}
loadComplete : function(data) {
 if (data.lastcompleted != lastcompleted) {
   if (lastcompleted != -1)
     location.reload();
   lastcompleted = data.lastcompleted;
 }
},
{% endblock %}

{% block actions %}
	<button class="btn btn-xs btn-primary" id="autorefresh" onclick="updateRefresh()" data-toggle="tooltip" data-placement="top" data-original-title="{% trans 'autorefresh'|capfirst|force_escape %}" >
	   <span class="fa {% if "refresh" in preferences and not preferences.refresh %} fa-refresh{% else %} fa-pause{% endif %}"></span>
	</button>
{{block.super}}
{% endblock %}
{% block after_table %}
<div class="row" id="accordion">
<div class="col-md-12">
  <h1>{% trans "launch tasks"|capfirst %}</h1>
</div></div>
<div class="row">
	<div id="tasks" class="panel-group col-md-12" role="tablist" aria-multiselectable="true" style="max-width:900px; min-width: 600px">
	{% if perms.auth.generate_plan or perms.auth.copy_scenario or perms.auth.release_scenario or perms.auth.promote_scenario or perms.auth.run_db %}
	<!--User has some permissions -->
    {% for command in commandlist %}
      {% call_method command "getHTML" request as HTMLcode %}
      {% if HTMLcode %}
      <div class="panel panel-default">
        <div class="panel-heading" data-parent="#tasks" role="tab" id="{{ forloop.counter }}Heading" data-toggle="collapse" data-target="#{{ forloop.counter }}Accord">
          {% if command.help_url %}<span class='fa fa-question pull-right' onclick="window.open('{% setting "DOCUMENTATION_URL" %}/docs/{% version_short %}/{{ command.help_url }}')"></span>{% endif %}
          <h4 class="panel-title">
            <a role="button">
              {{ command.title|capfirst }}
            </a>
          </h4>
        </div>
        <div id="{{ forloop.counter }}Accord" class="panel-collapse collapse {% if forloop.counter == 1 %}in{% endif %}" role="tabpanel" aria-labelledby="{{ forloop.counter }}Heading">
          <div class="panel-body">
            {{ HTMLcode }}
          </div>
        </div>
      </div>
      {% endif %}
    {% endfor %}
	{% else %}
	{% trans "Sorry, You don't have any execute permissions..." %}
	{% endif %}
	</div>
	</div> <!-- end row -->
{% endblock %}
